<template>
  <div class="goodsinfo-contain">
    <!-- 加入购物车的小球 -->
    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    >
      <div class="add-box" v-show="boxflag" ref="addBox"></div>
    </transition>
    <!-- 商品轮播图页面 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <mt-swipe :auto="4000" class="swipe">
            <mt-swipe-item v-for="item in swipeImgList" :key="item.id"><img :src="item.src" alt=""></mt-swipe-item>
          </mt-swipe>
        </div>
      </div>
		</div>

   <!--商品详情  -->
    <div class="mui-card shop-det">
      <div class="mui-card-header">{{goodsPrice.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner price">
          <p>
            市场价:<span><del>￥{{goodsPrice.market_price}}</del></span>&nbsp;&nbsp;
            销售价:<span class="now_price">￥{{goodsPrice.sell_price}}</span>
          </p>
          <div class="buyNumber">
            购买数量:
             <el-input-number v-model="num1" @change="handleChange" :min="1" :max="goodsPrice.stock_quantity" label="1">gg</el-input-number>
          </div>
          <mt-button type="primary">立即购买</mt-button>
          <mt-button type="danger" @click="addShopCar">加入购物车</mt-button>
        </div>
      </div>
    </div>

    <!-- 商品参数 -->
    <div class="mui-card parameter">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号:{{goodsPrice.goods_no}}</p>
						<p>库存情况:{{goodsPrice.stock_quantity}}件</p>
						<p>上架时间:{{goodsPrice.add_time | timeFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
          <mt-button type="primary" size="large" plain @click="goGoodsIntrodu(goodsPrice.id)">图文介绍</mt-button>
          <mt-button type="danger" size="large" plain @click="goGoodsComment(goodsPrice.id)">商品评论</mt-button>
        </div>
		</div>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'mint-ui';
export default {
  data(){
    return{
      id:this.$route.params.id,
      swipeImgList:[],
      goodsPrice:[],
      num1:1,
      boxflag:false
    }
  },

  created(){
    this.getSwipeImg();
    this.getGoodsPrice();
  },
  
  methods:{
    // 获取轮播图图片
    getSwipeImg(){
      this.$http.get("http://www.liulongbin.top:3005/api/getthumimages/"+this.id).then(result=>{
        if(result.body.status===0){
          this.swipeImgList=result.body.message;
        }else{
          Toast("获取数据失败")
        }
      })
    },

    // 获取商品参数区和价格
    getGoodsPrice(){
      this.$http.get("http://www.liulongbin.top:3005/api/goods/getinfo/"+this.id).then(result=>{
        if(result.body.status===0){
          this.goodsPrice=result.body.message[0];
        }else{
          Toast("获取消息失败")
        }
      })
    },

    // 点击添加购物车按钮
    addShopCar(){
      this.boxflag=!this.boxflag;
      let shopinfo = {
        id:this.goodsPrice.id,
        price:this.goodsPrice.sell_price,
        count:this.num1,
        select:true
      };
      this.$store.commit("changCar",shopinfo);
    },

    // 绑定的数据
    handleChange(value) {
      console.log(value);
    },

    // 实现加入购物车的动画
    beforeEnter(el){
      el.style.transform="translate(0,0)"
    },
    enter(el,done){
      el.offsetWidth;

      // 通过getBoundingClientRect()的方法获取DOM元素的相对位置
      // 使用横轴的差和纵轴的差作为动画结束的位置

      let addBoxPosition = this.$refs.addBox.getBoundingClientRect();
      let badgePosition = document.getElementById("badge").getBoundingClientRect();

      const moveX = badgePosition.left-addBoxPosition.left
      const moveY = badgePosition.top-addBoxPosition.top
    
      el.style.transform=`translate(${parseInt(moveX)}px,${parseInt(moveY)}px)`
      el.style.transition = "all 0.5s cubic-bezier(.4,.78,.83,.67)";
      done();
    },
    afterEnter(le){
      this.boxflag=!this.boxflag;
    },

    // 跳转到 图文介绍页面
    goGoodsIntrodu(id){
      this.$router.push({name:"goodsintrodu",params:{id}})
    },
    // 跳转到商品评论
    goGoodsComment(id){
      this.$router.push({name:"goodscomment",params:{id}})
    }
  },
}
</script>

<style lang="scss" scoped>
  .goodsinfo-contain{
    background: #eee;
    overflow: hidden;
    .swipe{
      text-align: center;
      margin: 0px;
      padding: 0px;
      height: 200px;
      img{
        height: 100%;
      }
    }

    .mint-button--normal{
      margin: 8px 0px;
    }
  
    .now_price{
      color: red ;
      font-size: 20px;
    }

    .parameter{
      .mui-card-footer{
        display: block;
        .mint-button--primary.is-plain{
          margin: 10px 0px;
        }
      }
    }

    .add-box{
      width: 15px;
      height: 15px;
      background: red;
      border-radius: 50%;
      position: absolute;
      left: 171px;
      top:392px;
      z-index: 99;
    }
  }
</style>
